"Work Step Html design "
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="pset"> <div class="container"> <div class="row listar-feature-items"> <div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px"> <div class="listar-feature-item listar-feature-has-link"> <a href="#" target="_blank"></a> <div class="listar-feature-item-inner"> <div class="listar-feature-right-border"></div> <div class="listar-feature-block-content-wrapper"> <div class="listar-feature-icon-wrapper"> <div class="listar-feature-icon-inner"> <div> <img alt="Businesses" class="listar-image-icon" src="https://image.flaticon.com/icons/svg/1899/1899582.svg"> </div> </div> </div> <div class="listar-feature-content-wrapper" style="padding-top: 0px;"> <div class="listar-feature-item-title listar-feature-counter-added"> <span><span>01</span> Businesses </span> </div> <div class="listar-feature-item-excerpt"> Start publish listings to show everyone the details and goodies of your establishment. </div> </div> </div> </div> </div> <div class="listar-feature-fix-bottom-padding listar-fix-feature-arrow-button-height"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px"> <div class="listar-feature-item listar-feature-has-link"> <a href="#" target="_blank"></a> <div class="listar-feature-item-inner"> <div class="listar-feature-right-border"></div> <div class="listar-feature-block-content-wrapper"> <div class="listar-feature-icon-wrapper"> <div class="listar-feature-icon-inner"> <div> <img alt="Customers" class="listar-image-icon" src="https://image.flaticon.com/icons/svg/1899/1899506.svg"> </div> </div> </div> <div class="listar-feature-content-wrapper" style="padding-top: 0px;"> <div class="listar-feature-item-title listar-feature-counter-added"> <span><span>02</span> Customers </span> </div> <div class="listar-feature-item-excerpt"> Easily find interesting places by local experts, save time by checking listing features. </div> </div> </div> </div> </div> <div class="listar-feature-fix-bottom-padding listar-fix-feature-arrow-button-height"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4 listar-feature-item-wrapper listar-feature-with-image listar-height-changed" data-aos="fade-zoom-in" data-aos-group="features" data-line-height="25.2px"> <div class="listar-feature-item listar-feature-has-link"> <a href="#" target="_blank"></a> <div class="listar-feature-item-inner"> <div class="listar-feature-right-border"></div> <div class="listar-feature-block-content-wrapper"> <div class="listar-feature-icon-wrapper"> <div class="listar-feature-icon-inner"> <div> <img alt="Feedback" class="listar-image-icon" src="https://image.flaticon.com/icons/svg/1899/1899604.svg"> </div> </div> </div> <div class="listar-feature-content-wrapper" style="padding-top: 0px;"> <div class="listar-feature-item-title listar-feature-counter-added"> <span><span>03</span> Feedback </span> </div> <div class="listar-feature-item-excerpt"> Visitors discuss listings to share experiences, so businesses get reputation consolidated. </div> </div> </div> </div> </div> <div class="listar-feature-fix-bottom-padding listar-fix-feature-arrow-button-height"></div> </div> </div> </div> </div>
body { width: 100%; min-height: 100vh; background-color: #f4f4f4; min-height: calc(100vh - var(--vh-offset, 0px)); overflow-x: hidden; font-weight: 400; top: 0; color: #252525; font-size: 14px; line-height: 1.8; letter-spacing: 0.025em; } .header-design { background-color: #a4508b; background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%); height: 120px; text-align: center; } .listar-map-button { width: 100%; position: absolute; display: table; right: 0; top: 0; height: 200px; line-height: 164px; white-space: nowrap; font-size: 0; } .listar-map-button { right: auto; /*** box-shadow: 0 0 65px rgba(0,0,0,.07) inset, 0 0 35px rgba(0,0,0,.05) inset;**/ } .listar-map-button-text span { background-color: #fff; color: #252525; text-shadow: none; } .listar-page-header-content .listar-map-button-text span { position: relative; display: inline-block; vertical-align: middle; font-size: 15px; height: 44px; line-height: 1.6; padding: 10px 25px; box-shadow: 0 0 300px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 0, 0, 0.06); border-radius: 50px; background-color: rgba(35, 40, 45, 0.9); color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); } header .footer-wave { max-width: 102%; width: 100%; height: 187.8px; left: 0; z-index: 1; bottom: -67px; background: url(https://1.bp.blogspot.com/-NYl6L8pz8B4/XoIVXwfhlNI/AAAAAAAAU3k/nxJKiLT706Mb7jUFiM5vdCsOSNnFAh0yQCLcBGAsYHQ/s1600/hero-wave.png) repeat-x; animation: wave 10s cubic-bezier(0.44, 0.66, 0.67, 0.37) infinite; } @keyframes wave { 0% { background-position: 0; } 100% { background-position: 1440px; } } .listar-feature-item-wrapper { margin-bottom: 120px; padding-left: 27px; padding-right: 27px; } .listar-feature-item { height: calc(100% - 20px); } .listar-feature-item.listar-feature-has-link ~ .listar-feature-fix-bottom-padding.listar-fix-feature-arrow-button-height { position: relative; display: block; width: 100%; height: 30px; } .listar-feature-item a { position: absolute; top: -12px; left: 15px; width: calc(100% - 30px); height: calc(100% + 4px); border-radius: 1000px; z-index: 10; } .listar-feature-with-image .listar-feature-item a:before { content: ""; position: absolute; top: -74px; left: 50%; margin-left: -74px; width: 148px; height: 148px; border-radius: 1000px; z-index: 10; } .listar-feature-item a:after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -25px; width: 50px; height: 50px; border-radius: 1000px; z-index: 10; animation: ripple 0.7s linear infinite; box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5); } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(163, 177, 198, 0.3), 0 0 0 1em rgba(163, 177, 198, 0.3), 0 0 0 3em rgba(163, 177, 198, 0.03), 0 0 0 5em rgba(163, 177, 198, 0.01); } 100% { box-shadow: 0 0 0 1em rgba(163, 177, 198, 0.3), 0 0 0 3em rgba(163, 177, 198, 0.03), 0 0 0 5em rgba(163, 177, 198, 0.03), 0 0 0 8em rgba(163, 177, 198, 0.01); } } .listar-feature-item .listar-feature-item-inner { padding: 50px 30px; border-radius: 6px; z-index: 5; position: relative; height: 100%; } .listar-feature-item .listar-feature-item-inner { padding-top: 60px; padding-bottom: 60px; } .listar-feature-item .listar-feature-item-inner:before { border: 0; box-shadow: 120px 0px 150px rgba(80, 80, 80, 0.15), 10px 0px 10px rgba(80, 80, 80, 0.02); border-radius: 1000px; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 100% ); background: -webkit-gradient( left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)) ); background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 100% ); background: -o-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 100% ); background: -ms-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 100% ); background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ffffff',GradientType=1); } .listar-feature-item .listar-feature-item-inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .listar-feature-right-border { position: absolute; width: calc(100% + 24px); height: calc(100% + 24px); top: -12px; left: 50%; overflow: hidden; } .listar-feature-items { text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .listar-feature-right-border:before, .listar-hovering-features .listar-feature-item a:hover ~ .listar-feature-item-inner .listar-feature-right-border:before { border: 11px solid #2f53bf; } .listar-feature-right-border:before, .listar-hovering-features .listar-feature-item a:hover ~ .listar-feature-item-inner .listar-feature-right-border:before, .listar-hovering-features-grey .listar-feature-item a:hover ~ .listar-feature-item-inner .listar-feature-right-border:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 11px solid #258bd5; border-radius: 800px; left: -50%; } .listar-feature-item .listar-feature-block-content-wrapper { position: relative; display: block; text-decoration: none; margin: -30px; padding: 30px; height: calc(100% + 100px); } .listar-features-design-2 .listar-feature-item-wrapper { margin-bottom: 120px; padding-left: 27px; padding-right: 27px; } .listar-feature-item.listar-feature-has-link .listar-feature-item-inner:after { content: ""; background-color: #fff; z-index: 6; position: absolute; background-repeat: no-repeat; background-position: center center; } .listar-feature-icon-wrapper { width: 148px; height: 148px; line-height: 148px; border-radius: 500px; position: relative; background-color: #fff; box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.06); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 50%; vertical-align: middle; margin-left: -74px; top: -66px; margin-top: -74px; } .listar-feature-icon-inner { width: 120px; height: 120px; line-height: 120px; border-radius: 500px; position: relative; display: inline-block; vertical-align: middle; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.14); background: #fff; } .listar-feature-icon-inner div { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); display: inline-block; position: relative; width: 120px; height: 120px; line-height: 120px; text-align: left; } .listar-feature-icon-inner img { position: relative; margin: 0 auto; vertical-align: middle; display: inline-block; width: auto; left: 50%; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); height: 55px; } .listar-feature-item img, .listar-feature-item i { position: relative; display: inline-block; border-bottom: 0; font-size: 40px; top: 0; padding: 0; color: #258bd5; } .listar-feature-with-image .listar-feature-content-wrapper { top: 0; } .listar-feature-content-wrapper { position: relative; margin-top: -15.5px; } .listar-feature-item .listar-feature-item-title { padding-top: 0; margin: 0 0 30px; text-align: center; line-height: 1.5; } .listar-feature-item .listar-feature-item-title.listar-feature-counter-added > span { margin-left: 25px; border-radius: 0 50px 50px 0; } .listar-feature-item .listar-feature-item-title > span { box-shadow: 15px 20px 30px rgba(80, 80, 80, 0.12), 5px 0px 40px rgba(80, 80, 80, 0.1); padding: 10px 20px; display: inline-block; position: relative; background-color: #fff; } .listar-feature-item .listar-feature-item-title > span span { box-shadow: 15px 15px 30px rgba(80, 80, 80, 0.2), 5px 0px 80px rgba(80, 80, 80, 0.15); padding: 10px 0; display: inline-block; width: 50px; height: 50px; line-height: 30px; white-space: nowrap; position: absolute; top: -3px; left: -40px; border-radius: 50px; background-color: #fff; } .listar-feature-item .listar-feature-item-title span { display: inline-block; font-size: 14px; line-height: normal; font-weight: 400; text-shadow: none; border-radius: 50px; color: #252525; font-size: 18px; } .listar-feature-item-excerpt { padding: 0 20px; } .listar-feature-item-excerpt { color: #252525; position: relative; top: 0; width: 100%; margin: 0 auto; text-align: center; } .pset { padding-top: 180px; padding-bottom: 80px; } .listar-map-button-text span { position: relative; display: inline-block; vertical-align: middle; font-size: 15px; height: 44px; line-height: 1.6; padding: 10px 25px; box-shadow: 0 0 31px rgba(0, 0, 0, 0.65), 0 0 4px rgba(0, 0, 0, 0.06); border-radius: 50px; background-color: rgba(35, 40, 45, 0.9); color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); } .listar-map-button-text span { background-color: #fff; color: #252525; text-shadow: none; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .listar-map-button-text span:after { border: 12px solid #fff; } .listar-map-button-text span:after { content: ""; position: absolute; top: -14px; left: -14px; width: calc(100% + 28px); height: calc(100% + 28px); border-radius: 36px; } .listar-map-button:hover .listar-map-button-text span { padding: 10px 43px 10px 51px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .listar-feature-with-image .listar-feature-item a:before { content: ""; position: absolute; top: -74px; left: 50%; margin-left: -74px; width: 148px; height: 148px; border-radius: 1000px; z-index: 10; } .listar-feature-item.listar-feature-has-link .listar-feature-item-inner:after { margin-left: -25px; width: 50px; height: 50px; border-radius: 50px; box-shadow: 10px 10px 40px rgba(80, 80, 80, 0.15), 15px 15px 30px rgba(80, 80, 80, 0.05), 0 0 120px rgba(80, 80, 80, 0.6); bottom: -30px; background-image: url("https://image.flaticon.com/icons/svg/2316/2316674.svg"); background-size: 40%; color: #555; line-height: 52px; }

Related: See More


Questions / Comments: